{% extends "devhub/addons/submit/base.html" %}

{% block title %}
{{ dev_page_title(_('Theme generate'), addon) }}
{% endblock %}

{% set channel_param = 'listed' if channel == amo.CHANNEL_LISTED else 'unlisted' %}

{% block primary %}
  <h3>{{ _('Theme generator') }}</h3>
  <div id="theme-wizard" data-version="{{ version_number }}">
    {% if unsupported_properties %}
      <div class="notification-box error">
          {{ _('Warning: the following manifest properties that your most recent version '
               "upload used in its manifest are unsupported in this wizard and will be ignored:") }}
          <ul class="note">
            {% for prop in unsupported_properties %}
              <li>{{ prop }}</li>
            {% endfor %}
          </ul>
      </div>
    {% endif %}

    <div>
        <h3>{{ _('Theme name') }}<span class="req" title="{{ _('required') }}">*</span></h3>
        {% if addon %}
          <input type="hidden" id="theme-name" value="{{ addon.name }}"/>
          {{ addon.name }}
        {% else %}
          <input type="text" id="theme-name"/>
          <ul class="general-validation-error errorlist validator">
          </ul>
        {% endif %}
    </div>
    <div id="theme-header" class="row" data-existing-header="{{ existing_properties.get('images', {}).get('theme_frame','') }}">
      <label class="row" for="header-img">
        <h3>{{ _('Select a header image for your theme') }}<span class="req" title="{{ _('required') }}">*</span></h3>
      </label>
      <input accept="image/jpeg,image/png,image/apng,image/svg+xml,image/gif"
             id="header-img" name="header" type="file">
      <ul class="note">
        <li>{{ _('Recommended height: 200 pixels') }}</li>
        <li>{{ _('6.9MB max') }}</li>
        <li>{{ _('PNG, JPG, APNG, SVG or GIF (not animated)') }}</li>
        <li>{{ _('Aligned to top-right') }}</li>
      </ul>
      <ul class="errorlist"></ul>
      <img class="preview" alt="">
      <ul class="header-image-error errorlist validator">
      </ul>
      <a href="#" class="reset">
        {{ _('Select a different header image') }}</a>
    </div>
    <div class="colors">
      <h3>{{ _('Select colors for your theme') }}</h3>
      <ul class="colors">
        {% set existing_colors = existing_properties['colors'] or {} %}
        {% for (property, label, tip, val_default) in colors %}
        <li class="row{{ loop.cycle('', ' left') }}">
          {% if property %}
            <label class="row" for="{{ property }}">
              {{ label }}
              <span>
                {% if val_default %}
                  <span class="req" title="{{ _('required') }}">*</span>
                {% else %}
                  <span class="optional">{{ _('optional') }}</span>
                {% endif %}
                <span class="tip tooltip" title="{{ tip }}" data-oldtitle="">?</span>
              </span>
            </label>
            {% with value = existing_colors.get(property, val_default) %}
              <input class="color-picker" id="{{ property }}" name="{{ property }}"
                     type="text"{{ (' value=' + value) if value else '' }}>
            {% endwith %}
          {% endif %}
        </li>
        {% endfor %}
      </ul>
    </div>
    <div>
        <h3>{{ _('Browser preview') }}</h3>
        <div id="browser-preview" dir="ltr">
            {% set svg_render_size = amo.THEME_PREVIEW_RENDERINGS['firefox']['full'] %}
            {% include 'devhub/addons/includes/static_theme_preview_svg.xml' %}
        </div>
    </div>
    <textarea id="manifest"></textarea>

    <form method="post" id="submit-describe" class="item">
      {% csrf_token %}
      <div class="hidden">
        {{ new_addon_form.upload }}
        {{ new_addon_form.compatible_apps }}
      </div>
      {{ new_addon_form.compatible_apps.errors }}
      {{ new_addon_form.upload.errors }}
      {{ new_addon_form.non_field_errors() }}
      <div id="submission-field" class="submission-buttons addon-submission-field" data-submissions-enabled="{{ submissions_enabled|json }}">
        <button class="button upload"
            {% if addon %}
                formaction="{{ url('devhub.upload_for_version', addon.slug, channel_param) }}"
            {% else %}
                formaction="{{ url('devhub.upload_unlisted'
                                   if channel == amo.CHANNEL_UNLISTED
                                   else 'devhub.upload') }}"
            {% endif %}
            data-uploading-text="{{ _('Uploading Theme') }}">{{ _('Finish Theme') }}</button>
        &nbsp;
        <button class="delete-button" type="submit"
            {% if addon %}
                formaction="{{ url('devhub.submit.version.upload', addon.slug, channel_param) }}"
            {% else %}
                formaction="{{ url('devhub.submit.theme.upload', channel_param) }}"
            {% endif %}
            >{{ _('Back') }}
        </button>
      </div>
    </form>
  </div>
{% endblock %}
